<template>
    <el-dialog
        title="新增职位"
        :visible.sync="visible"
        width="600px"
        custom-class="recruit-dialog">
      <!-- 新增职位表单 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="职位名称" prop="jobName">
          <el-input v-model="form.jobName" placeholder="请输入职位名称"></el-input>
        </el-form-item>
        <el-form-item label="岗位职责" prop="jobDescribe">
          <el-input
            v-model="form.jobDescribe"
            type="textarea"
            placeholder="请输入职位职责"
            :rows="3">
          </el-input>
        </el-form-item>
        <el-form-item label="专业需求" prop="demand">
          <el-input v-model="form.demand" placeholder="请输入专业需求"></el-input>
        </el-form-item>
        <el-form-item label="最低薪资(元)" prop="minSalary">
          <el-input v-model="form.minSalary" :min="0" placeholder="请输入最低薪资"></el-input>
        </el-form-item>
        <el-form-item label="最高薪资(元)" prop="maxSalary">
          <el-input v-model="form.maxSalary" :min="0" placeholder="请输入最高薪资"></el-input>
        </el-form-item>
        <el-form-item label="工作地点" prop="jobAddress">
          <el-input v-model="form.jobAddress" placeholder="请输入工作地点"></el-input>
        </el-form-item>
        <el-form-item label="职位要求" prop="jobRequire">
          <el-input v-model="form.jobRequire" placeholder="请输入职位要求"></el-input>
        </el-form-item>
        <el-form-item label="福利" prop="jobBenefits">
          <el-input v-model="form.jobBenefits" placeholder="请输入福利"></el-input>
        </el-form-item>
      </el-form>
  
      <!-- 底部按钮 -->
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script>
  export default {
    name: "AddRecruit",
    props: {
        visible: Boolean
    },
    data() {
      return {
        form: {
          jobName: "",
          jobDescribe: "",
          demand: "",
          minSalary: 0,
          maxSalary: 0,
          jobAddress: "",
          jobRequire: "",
          jobBenefits: "",
        },
        rules: {
          jobName: [{ required: true, message: "职位名称不能为空", trigger: "blur" }],
          // minSalary: [{ required: true, message: "最低薪资不能为空", trigger: "blur" }],
          // maxSalary: [{ required: true, message: "最高薪资不能为空", trigger: "blur" }],
          jobAddress: [{ required: true, message: "工作地点不能为空", trigger: "blur" }],
        },
      };
    },
    methods: {
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$emit('submit', this.form)
            this.resetForm() // 新增表单重置
            this.handleClose()
          }
        })
      },
      // 新增重置表单方法
      resetForm() {
        this.form = {
          jobName: "",
          jobDescribe: "",
          demand: "",
          minSalary: 0,
          maxSalary: 0,
          jobAddress: "",
          jobRequire: "",
          jobBenefits: "",
        }
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      handleClose() {
        this.resetForm() // 关闭时也重置表单
        this.$emit('update:visible', false)
      }
    },
  };
</script>
  
<style scoped>
.add-recruit-dialog {
  max-height: 80vh;
  overflow-y: auto;
}
.recruit-dialog .el-dialog__body {
  padding: 20px 30px;
}

.recruit-dialog .el-form-item {
  margin-bottom: 18px;
}

.recruit-dialog .el-input__inner {
  height: 36px;
}

/* 新增加载状态样式 */
.submit-loading ::v-deep .el-button {
  position: relative;
  padding-left: 40px;
}
.submit-loading ::v-deep .el-button:after {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  border-right-color: transparent;
  animation: rotate 0.8s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
</style>